<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>基础篇 | Mask的前端笔记</title>
    <meta name="generator" content="VuePress 1.8.0">
    <link rel="icon" href="/note_blob/favicon.ico">
    <meta name="description" content=" ">
    
    <link rel="preload" href="/note_blob/assets/css/0.styles.eb969508.css" as="style"><link rel="preload" href="/note_blob/assets/js/app.2eeab7c1.js" as="script"><link rel="preload" href="/note_blob/assets/js/2.0b68a382.js" as="script"><link rel="preload" href="/note_blob/assets/js/8.3b303ca1.js" as="script"><link rel="prefetch" href="/note_blob/assets/js/10.bc0c7728.js"><link rel="prefetch" href="/note_blob/assets/js/11.5743c401.js"><link rel="prefetch" href="/note_blob/assets/js/12.83b7c603.js"><link rel="prefetch" href="/note_blob/assets/js/3.1f4727a9.js"><link rel="prefetch" href="/note_blob/assets/js/4.158abeb5.js"><link rel="prefetch" href="/note_blob/assets/js/5.fd05ad8b.js"><link rel="prefetch" href="/note_blob/assets/js/6.91a76f73.js"><link rel="prefetch" href="/note_blob/assets/js/7.1ca97cb1.js"><link rel="prefetch" href="/note_blob/assets/js/9.9661832c.js">
    <link rel="stylesheet" href="/note_blob/assets/css/0.styles.eb969508.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/note_blob/" class="home-link router-link-active"><!----> <span class="site-name">Mask的前端笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/note_blob/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/note_blob/docs/base.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  基础篇
</a></div><div class="nav-item"><a href="/note_blob/docs/share.html" class="nav-link">
  分享篇
</a></div><div class="nav-item"><a href="/note_blob/docs/code.html" class="nav-link">
  代码篇
</a></div><div class="nav-item"><a href="/note_blob/docs/book.html" class="nav-link">
  推荐篇
</a></div><div class="nav-item"><a href="/note_blob/docs/css.html" class="nav-link">
  css篇
</a></div><div class="nav-item"><a href="https://github.com/jsmask" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/note_blob/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/note_blob/docs/base.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  基础篇
</a></div><div class="nav-item"><a href="/note_blob/docs/share.html" class="nav-link">
  分享篇
</a></div><div class="nav-item"><a href="/note_blob/docs/code.html" class="nav-link">
  代码篇
</a></div><div class="nav-item"><a href="/note_blob/docs/book.html" class="nav-link">
  推荐篇
</a></div><div class="nav-item"><a href="/note_blob/docs/css.html" class="nav-link">
  css篇
</a></div><div class="nav-item"><a href="https://github.com/jsmask" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础篇</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/note_blob/docs/base.html#url" class="sidebar-link">URL</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/base.html#doctype" class="sidebar-link">DOCTYPE</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/base.html#post与get请求的区别" class="sidebar-link">POST与GET请求的区别</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/base.html#http状态码" class="sidebar-link">HTTP状态码</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/base.html#提升页面的性能的方法" class="sidebar-link">提升页面的性能的方法</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/base.html#异步加载" class="sidebar-link">异步加载</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/base.html#canvas捕获物体" class="sidebar-link">canvas捕获物体</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/base.html#for-of-循环" class="sidebar-link">for...of 循环</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/base.html#页面加载过程" class="sidebar-link">页面加载过程</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/base.html#立即执行函数" class="sidebar-link">立即执行函数</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/base.html#performance" class="sidebar-link">performance</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/base.html#回流" class="sidebar-link">回流</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/base.html#重绘" class="sidebar-link">重绘</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/base.html#webassembly" class="sidebar-link">WebAssembly</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/base.html#jsonp" class="sidebar-link">jsonp</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/base.html#高阶函数" class="sidebar-link">高阶函数</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/base.html#高阶组件" class="sidebar-link">高阶组件</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/base.html#nginx" class="sidebar-link">Nginx</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/base.html#promise" class="sidebar-link">Promise</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/base.html#fetch" class="sidebar-link">Fetch</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/base.html#react-router" class="sidebar-link">React Router</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/base.html#vue-cli" class="sidebar-link">Vue CLI</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/base.html#vue-router" class="sidebar-link">Vue Router</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/base.html#vue-响应式" class="sidebar-link">Vue 响应式</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/base.html#flux-概念" class="sidebar-link">Flux 概念</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/base.html#mvc-框架" class="sidebar-link">MVC 框架</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/base.html#rudex" class="sidebar-link">Rudex</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/base.html#web攻击" class="sidebar-link">Web攻击</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note_blob/docs/base.html#xss" class="sidebar-link">XSS</a></li><li class="sidebar-sub-header"><a href="/note_blob/docs/base.html#csrf" class="sidebar-link">CSRF</a></li><li class="sidebar-sub-header"><a href="/note_blob/docs/base.html#点击劫持" class="sidebar-link">点击劫持</a></li><li class="sidebar-sub-header"><a href="/note_blob/docs/base.html#sql注入" class="sidebar-link">SQL注入</a></li><li class="sidebar-sub-header"><a href="/note_blob/docs/base.html#os注入" class="sidebar-link">OS注入</a></li><li class="sidebar-sub-header"><a href="/note_blob/docs/base.html#请求劫持" class="sidebar-link">请求劫持</a></li><li class="sidebar-sub-header"><a href="/note_blob/docs/base.html#ddos" class="sidebar-link">DDOS</a></li></ul></li><li><a href="/note_blob/docs/base.html#设计模式" class="sidebar-link">设计模式</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/base.html#设计原则" class="sidebar-link">设计原则</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/base.html#算法思想" class="sidebar-link">算法思想</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/base.html#类的概念" class="sidebar-link">类的概念</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="基础篇"><a href="#基础篇" class="header-anchor">#</a> 基础篇</h1> <h2 id="url"><a href="#url" class="header-anchor">#</a> URL</h2> <blockquote><p>统一资源定位符</p> <p>协议://主机:端口/路径?查询#锚点</p> <p>scheme://host:port/path?query#fragment</p></blockquote> <hr> <h2 id="doctype"><a href="#doctype" class="header-anchor">#</a> DOCTYPE</h2> <blockquote><p>DTD(document type definition，文档类型定义)是一系列的语法规则，用来定义XML或(X)HTML的文件类型，浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。</p> <p>DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时片会出现一些差错。</p> <h4 id="常见的doctype"><a href="#常见的doctype" class="header-anchor">#</a> 常见的DOCTYPE：</h4> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!--HTML5--&gt;</span>
<span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!--HTML4.01 Transitional（过渡版）,包含扩展性和弃用的元素--&gt;</span>
<span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">HTML</span> <span class="token name">PUBLIC</span> <span class="token string">&quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;</span> <span class="token string">&quot;
http://www.w3.org/TR/html4/loose.dtd&quot;</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!--HTML4.01 Strict(严格版),不包含扩展性和弃用的元素--&gt;</span>
<span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">HTML</span> <span class="token name">PUBLIC</span> <span class="token string">&quot;-//W3C//DTD HTML 4.01 Strict//EN&quot;</span> <span class="token string">&quot;http://www.w3.org/TR/html4/strict.dtd&quot;</span><span class="token punctuation">&gt;</span></span>

</code></pre></div></blockquote> <hr> <h2 id="post与get请求的区别"><a href="#post与get请求的区别" class="header-anchor">#</a> POST与GET请求的区别</h2> <ol><li>GET在浏览器回退时是无害的，而POST会再次提交请求</li> <li>GET产生的URL地址可以被收藏，而POST不可以</li> <li>GET请求会被浏览器主动缓存，而POST不会，除非手动设置</li> <li>GET请求只能进行url编码，而POST支持多种编码方式</li> <li>GET请求参数会完整保留在浏览器的历史记录里，而POST不会</li> <li>GET请求在URL中传递的参数是有长度限制，而POST没有限制</li> <li>对参数类型，GET只会接收ASCII字符，而POST没有限制</li> <li>GET比POST更不安全，因为参数直接暴露在URL上，所以不能直接传递敏感信息</li> <li>GET参数通过URL传递，POST放在Request Body中</li></ol> <hr> <h2 id="http状态码"><a href="#http状态码" class="header-anchor">#</a> HTTP状态码</h2> <ul><li>1xx:  指示信息，表示请求已接收，继续处理</li> <li>2xx:  成功，表示请求已被成功接收</li> <li>3xx: 重定向，要完成请求必须进行进行进一步操作</li> <li>4xx: 客户端错误，请求有语法错误或者请求无法实现</li> <li>5xx:  服务器错误，服务器未能实现合法的请求</li></ul> <hr> <h2 id="提升页面的性能的方法"><a href="#提升页面的性能的方法" class="header-anchor">#</a> 提升页面的性能的方法</h2> <ol><li><p>资源压缩合并，减少HTTP请求</p></li> <li><p>非核心代码异步加载</p></li> <li><p>利用浏览器缓存</p></li> <li><p>使用CDN</p></li> <li><p>与解析DNS</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>x-dns-prefetch-control<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>on<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dns-prefetch<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>//host_name_to_prefetch.com<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li></ol> <hr> <h2 id="异步加载"><a href="#异步加载" class="header-anchor">#</a> 异步加载</h2> <ol><li>异步加载的方式:
<ul><li>动态脚本加载</li> <li>defer</li> <li>async</li></ul></li> <li>异步加载的区别：
<ul><li>defer是在HTML解析完之后才会执行，如果是多个，按照加载的顺序依次执行</li> <li>async是在加载完之后立即执行，如果是多个执行顺序和加载顺序无关</li></ul></li></ol> <hr> <h2 id="canvas捕获物体"><a href="#canvas捕获物体" class="header-anchor">#</a> canvas捕获物体</h2> <ol><li>圆形捕获对比半径与两点间距</li> <li>矩形捕获判断坐标与长宽对应边界</li> <li>多边形与不规则图形采用分离轴定理(SAT)和最小平移向量(MTV)</li></ol> <hr> <h2 id="for-of-循环"><a href="#for-of-循环" class="header-anchor">#</a> for...of 循环</h2> <ol><li>实质上是iterator迭代器+while遍历的实现</li> <li>for..of循环适用于有序集合。如：Array,String,NodeList, Set,Map,arguments,TypedArray,Generator函数返回值</li> <li>object不是有序集合，可以用Map代替</li> <li>有序集合标志是Symbol.iterator</li></ol> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">typeof</span> <span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">[</span>Symbol<span class="token punctuation">.</span>iterator<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">//function</span>
<span class="token keyword">typeof</span> <span class="token class-name">Set</span><span class="token punctuation">.</span>prototype<span class="token punctuation">[</span>Symbol<span class="token punctuation">.</span>iterator<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">//function</span>
<span class="token keyword">typeof</span> <span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">[</span>Symbol<span class="token punctuation">.</span>iterator<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">//undefined</span>
</code></pre></div><hr> <h2 id="页面加载过程"><a href="#页面加载过程" class="header-anchor">#</a> 页面加载过程</h2> <ol><li>用户输入网址</li> <li>浏览器通过NDS，把网址解析成IP</li> <li>和IP地址建立TCP链接，发送HTTP请求</li> <li>服务器接收到请求，查库，读文件等，拼接好返回的HTTP响应</li> <li>浏览器收到首屏html，开始渲染</li> <li>解析html为dom</li> <li>解析css为css tree</li> <li>dom+css 生成render-tree 绘图</li> <li>加载script的js文件</li> <li>执行js</li></ol> <hr> <h2 id="立即执行函数"><a href="#立即执行函数" class="header-anchor">#</a> 立即执行函数</h2> <ol><li><p>立即执行函数(IIFE)：Immediately(立即地) Invoked(调用) Function(函数) Expression(表达式)</p></li> <li><p>函数声明式：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Function Declaration'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>函数表达式：把一个(匿名)函数(函数声明式)赋值给一个变量的形式</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">//PS：+1 !1 ~1 (1) 都算是函数表达式</span>
<span class="token keyword">var</span> <span class="token function-variable function">test</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Function Expression'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>对于函数后面的括号，叫执行符合</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li> <li><p>当一个函数需要立即执行的情况，该函数必须是表达式形式</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> <span class="token function-variable function">test</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Function Expression'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Function Expression'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token operator">!</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Function Expression'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">//W3C推荐的立即执行函数的编写规范</span>
<span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Function Expression'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//实践中，为了清晰()要放到外面</span>
<span class="token comment">//且前面加;防止上层没有;无法判定上下层关系而造成错误</span>
<span class="token punctuation">;</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Function Expression'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token punctuation">;</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span>b<span class="token punctuation">,</span>c<span class="token punctuation">,</span>d</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arguments<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//3</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>test<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//4</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">)</span>
</code></pre></div></li> <li><p>特点：</p> <ul><li>可以创建一个与外界没有任何关联的独立作用域</li> <li>执行完成后，自动销毁</li> <li>ES3、ES5立场上是没有模块概念，立即执行函数来模拟模块化，封闭作用域、抛出接口</li> <li>向外界抛出一系列属性和方法，也可以在window上保存属性和方法</li></ul></li></ol> <hr> <h2 id="performance"><a href="#performance" class="header-anchor">#</a> performance</h2> <ol><li>performance.getEntriesByType('navigation') -&gt; 获取加载信息</li> <li>查询加载耗时：
<ol><li>重定向耗时：redirectEnd - redirectStart</li> <li>DNS查询耗时：domainLookupEnd - domainLookupStart</li> <li>TCP链接耗时：connectEnd - connectStart</li> <li>HTTP请求耗时：responseEnd - responseStart</li> <li>解析dom树耗时：domComplete - domInteractive</li> <li>白屏时间： responseStart - navigationStart</li> <li>DOM ready时间：domContentLoadedEventEnd - navigationStart</li> <li>onload时间：loadEventEnd - loadEventStart</li></ol></li></ol> <hr> <h2 id="回流"><a href="#回流" class="header-anchor">#</a> 回流</h2> <blockquote><p>概念：当我们对DOM的修改引发了DOM几何尺寸的变化（比如修改元素的宽高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后在将计算的结果绘制出来。这个过程就是回流（也叫重排）。</p></blockquote> <hr> <h2 id="重绘"><a href="#重绘" class="header-anchor">#</a> 重绘</h2> <blockquote><p>概念：当我们对DOM的修改导致了样式的变化，却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需要重新计算元素的几何属性，直接为该元素绘制出新的样式（跳过了回流环节）。这个过程就是重绘。</p></blockquote> <hr> <h2 id="webassembly"><a href="#webassembly" class="header-anchor">#</a> WebAssembly</h2> <ol><li>概念：WebAssembly 是一种可以使用非 JavaScript 编程语言编写代码并且能在浏览器上运行的技术方案。</li></ol> <hr> <h2 id="jsonp"><a href="#jsonp" class="header-anchor">#</a> jsonp</h2> <blockquote><ol><li>jsonp只能解决GET类型的ajax请求跨域问题</li> <li>jsonp请求不是ajax请求，而是一般的get请求</li> <li>基本原理：
<ul><li>浏览器端：
<ul><li>动态生成来请求后台接口（src就是接口的url）</li> <li>定义好用于接收响应数据的函数，并将函数名通过请求参数提交给后台</li></ul></li> <li>服务器端：
<ul><li>接收到请求处理产生的数据后，返回一个个函数调用的js代码，并将结果数据作为实参传入函数调用</li></ul></li> <li>浏览器端：
<ul><li>接收到响应自动执行函数调用的js代码，也就是执行了提前定义好的回调函数，并得到了需要的结果函数</li></ul></li></ul></li></ol></blockquote> <hr> <h2 id="高阶函数"><a href="#高阶函数" class="header-anchor">#</a> 高阶函数</h2> <blockquote><h4 id="基本概念"><a href="#基本概念" class="header-anchor">#</a> 基本概念：</h4> <ol><li><p>一类特别的函数</p></li> <li><p>接收函数类型的参数
2. 返回值也是函数</p></li> <li><p>例如：</p></li> <li><p>定时器: setTimeout() / setInterval()</p></li> <li><p>Promise: Promise(()=&gt;{}) / then(()=&gt;{},reason=&gt;{})</p></li> <li><p>数组遍历相关的方法: forEach() / filter() / map() / reduce() /find() / findIndex()
4. 函数对象的bind()</p></li> <li><p>antd Form: Form.create()() / Form.getFieldDecorator()()</p></li> <li><p>高阶函数更新动态，更加具有扩展性</p></li></ol></blockquote> <hr> <h2 id="高阶组件"><a href="#高阶组件" class="header-anchor">#</a> 高阶组件</h2> <blockquote><h4 id="基本概念-2"><a href="#基本概念-2" class="header-anchor">#</a> 基本概念：</h4> <ol><li><p>本质是一个函数</p></li> <li><p>接收一个组件(被包装组件)，返回一个新的组件(包装组件)，包装组件会向被包装组件传入特点属性</p></li> <li><p>作用：扩展组件的功能</p></li> <li><p>也是一种高阶函数：接收一个组件函数，返回一个新的组件函数</p></li> <li><p>例如：</p> <p>a. antd Input: &lt;Input prefix={<Icon type="user"></Icon>} /&gt;</p></li></ol></blockquote> <hr> <h2 id="nginx"><a href="#nginx" class="header-anchor">#</a> Nginx</h2> <blockquote><h4 id="版本解释"><a href="#版本解释" class="header-anchor">#</a> 版本解释：</h4> <ol><li>Mainline version：主力在做的版本，就是开发版</li> <li>Stable version：最新稳定版，生产环境上建议使用的版本</li> <li>Legacy version：遗留的老版本的稳定版</li></ol> <h4 id="命令行"><a href="#命令行" class="header-anchor">#</a> 命令行：</h4> <ol><li>格式：nginx -s reload</li> <li>帮助：-? -h</li> <li>使用指定的配置文件：-c</li> <li>指定配置指令：-g</li> <li>指定运行目录：-p</li> <li>发送信号：-s</li> <li>立刻停止服务： -s stop</li> <li>优雅的停止服务：-s quit</li> <li>重载配置文件：-s reload</li> <li>重新开始记录日志文件：-s reopen</li> <li>测试配置文件是否有语法错误：-t -T</li> <li>打印nginx的版本信息、编译信息等：-v -V</li></ol> <h4 id="linux环境"><a href="#linux环境" class="header-anchor">#</a> Linux环境：</h4> <h4 id="_1、介绍"><a href="#_1、介绍" class="header-anchor">#</a> 1、介绍：</h4> <ol><li>yum -&gt; linux安装包管理工具</li></ol> <h4 id="_2、安装-启动-centos"><a href="#_2、安装-启动-centos" class="header-anchor">#</a> 2、安装&amp;启动(Centos)：</h4> <ol><li>yum install nginx #安装nginx</li> <li>systemctl start nginx.service # 开启nginx服务</li> <li>systemctl enable nginx.service # 跟随系统启动</li></ol> <h4 id="拓展"><a href="#拓展" class="header-anchor">#</a> 拓展：</h4> <ol><li>什么是服务器：一台电脑(没有显示器)，24小时为用户提供服务。</li> <li>安装流程：主机 -&gt; 操作系统 -&gt; window(.net)/Linux -&gt; tomcat/nginx(软件/反向代理)</li></ol></blockquote> <hr> <h2 id="promise"><a href="#promise" class="header-anchor">#</a> Promise</h2> <blockquote><h4 id="基本概念-3"><a href="#基本概念-3" class="header-anchor">#</a> 基本概念：</h4> <p>ES6异步编程的一种解决方案</p> <p>主要解决回调地狱问题</p> <p>链式编程</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span>reject</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
 <span class="token comment">//resolve('success') -&gt; 成功执行</span>
 <span class="token comment">//reject('error') -&gt; 错误终止</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><h4 id="三种状态"><a href="#三种状态" class="header-anchor">#</a> 三种状态：</h4> <ul><li>pending：等待状态，如，正在进行网络请求，或者定时器没有到时间</li> <li>fulfill：满足状态，主动回调resolve时，便处于该状态，并会回调.then()</li> <li>reject：拒绝状态，主动回调reject时，便处于该状态，并会回调.catch()</li></ul></blockquote> <hr> <h2 id="fetch"><a href="#fetch" class="header-anchor">#</a> Fetch</h2> <ol><li><p>概念：一个 JavaScript 接口用于访问和操作HTTP管道的零件。</p></li> <li><p>fetch基本使用：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> url <span class="token operator">=</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
<span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> res<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token parameter">err</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">data</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token parameter">err</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">)</span>

<span class="token comment">//async&amp;await使用：</span>
<span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">try</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> res <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">let</span> data <span class="token operator">=</span> <span class="token keyword">await</span> res<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div></li> <li><p>res能解析的格式：</p> <ul><li>.json()  -&gt; JSON 和数组</li> <li>.arraryBuffer() -&gt; 二进制的数组</li> <li>.blob() -&gt; 二进制大对象（来源于数据库，不需要解析，多用于多媒体文件）</li> <li>.text() -&gt; 文本</li></ul></li></ol> <hr> <h2 id="react-router"><a href="#react-router" class="header-anchor">#</a> React Router</h2> <ul><li><p>安装： npm install react-router-dom -S</p></li> <li><p>常用库：</p> <ul><li>react-router -&gt; 核心库，实现了所有路由的核心功能</li> <li>react-router-dom -&gt; 与浏览器DOM配合工作的版本</li> <li>react-router-native -&gt; 与React native配合工作的版本</li> <li>react-router-config -&gt; 用于静态配置</li></ul></li> <li><p>Router：路由对象，包括所有的路由配置、链接、逻辑等。</p> <ul><li><p>BrowserRouter</p> <table><thead><tr><th>解释</th></tr></thead> <tbody><tr><td>基于HTML5的History API，使用path呈现</td></tr> <tr><td>但不刷新时，服务器没有获得请求，需要服务器端配置</td></tr> <tr><td>刷新时，服务参与其中，服务器配合</td></tr></tbody></table></li> <li><p>HashRouter</p> <table><thead><tr><th>解释</th></tr></thead> <tbody><tr><td>location.hash，页面不刷新</td></tr> <tr><td>刷新时，服务器也不参与，服务器不配合</td></tr></tbody></table></li> <li><p>MemoryRouter</p> <table><thead><tr><th>解释</th></tr></thead> <tbody><tr><td>路由状态保存在内存中，刷新后消息</td></tr> <tr><td>用于非浏览器的环境</td></tr></tbody></table></li></ul></li> <li><p>Redirect：路由重定向</p></li> <li><p>Link：路由跳转</p></li></ul> <div class="language-react extra-class"><pre class="language-text"><code>//Link path属性：
// 写法1：直接传字符串
&lt;Link to=&quot;/abc&quot;&gt;TO Page&lt;/Link&gt;
// 写法2：传入对象
&lt;Link to={{pathname:&quot;/1&quot;,state:{id:1,name:&quot;js&quot;}}}&gt;TO Page&lt;/Link&gt;
</code></pre></div><ul><li>Route：路由表，也称又有配置</li></ul> <div class="language-react extra-class"><pre class="language-text"><code>// Route 属性：
// 1. component
&lt;Route exact  path=&quot;/&quot; component={Page}&gt;&lt;/Route&gt;
// 2. render
&lt;Route exact path=&quot;/&quot;
    render={props =&gt; (
       &lt;Page {...props} data={id:1,name:&quot;js&quot;}&gt;&lt;/Page&gt;
    )}&gt;
&lt;/Route&gt;
</code></pre></div><hr> <h2 id="vue-cli"><a href="#vue-cli" class="header-anchor">#</a> Vue CLI</h2> <ol><li><p>概念：Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统</p></li> <li><p>runtime-compiler 和 runtime-only的区别：</p> <ul><li>runtime-compiler流程为：template-&gt;抽象语法树(AST)-&gt;render-&gt;虚拟DOM-&gt;真实DOM</li> <li>runtime-only流程为：render-&gt;虚拟DOM-&gt;真实DOM</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function-variable function">render</span><span class="token operator">:</span> <span class="token parameter">h</span> <span class="token operator">=&gt;</span> <span class="token function">h</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span>  <span class="token comment">//createElement</span>
</code></pre></div></li> <li><p>自定义配置文件：vue.config.js</p></li></ol> <hr> <h2 id="vue-router"><a href="#vue-router" class="header-anchor">#</a> Vue Router</h2> <ol><li>概念：Vue Router 是 Vue.js 官方的路由管理器</li> <li>基本配置：
<ul><li>安装vue-router</li> <li>Vue.use -&gt;创建Vue-router对象 -&gt; 挂载到Vue实例</li> <li>创建组件，配置映射关系</li></ul></li> <li>路由守卫：
<ul><li>全局导航守卫</li> <li>路由独享守卫</li> <li>组件类守卫</li></ul></li></ol> <blockquote><h4 id="拓展使用"><a href="#拓展使用" class="header-anchor">#</a> 拓展使用：</h4> <h4 id="keep-alive"><a href="#keep-alive" class="header-anchor">#</a> keep-alive：</h4> <ul><li>作用：对组件进行缓存，从而节省性能</li> <li>属性：include：包含路由name。exclude：不包含路由name。</li> <li>被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行</li></ul> <h4 id="vue-router-mode模式"><a href="#vue-router-mode模式" class="header-anchor">#</a> Vue Router mode模式：</h4> <ul><li>hash模式 ：</li> <li>原理：location.hash</li> <li>history模式：</li> <li>原理：history.pushState | history.replaceState</li></ul> <h4 id="vue-router-动态传参方式"><a href="#vue-router-动态传参方式" class="header-anchor">#</a> Vue Router 动态传参方式：</h4> <ul><li>query类型:</li> <li><ol><li>路由格式：/router</li> <li>传递方式：对象中使用query的key作物传递方式（{path:&quot;/router&quot;,query:{id:'123'}}）</li> <li>传递后形成的路径：/router?id=123</li></ol></li> <li>params类型:</li> <li><ol><li>路由格式：/router/:id</li> <li>传递方式：在path后面跟上对应值</li> <li>传递后形成的路径：/router/123</li></ol></li></ul></blockquote> <hr> <h2 id="vue-响应式"><a href="#vue-响应式" class="header-anchor">#</a> Vue 响应式</h2> <ol><li>流程：
<ul><li>实例化Vue对象</li> <li>解析el模板Compile -&gt; 初始化View视图</li> <li>Observer劫持所有data属性-&gt; 每个属性各生成一个发布者 -&gt; 添加订阅 -&gt; 监听变化通知订阅者 -&gt; 更新View视图</li></ul></li> <li>修改数据时如果监听发生改变？
<ul><li>Object.defineProperty -&gt; 劫持对象属性</li></ul></li> <li>当数据改变如何通知界面刷新？
<ul><li>发布订阅模式</li></ul></li> <li>基本实现原理:</li></ol> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">class</span> <span class="token class-name">Vue</span> <span class="token punctuation">{</span>
    <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">//保存数据</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>$options <span class="token operator">=</span> options<span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>$el <span class="token operator">=</span> options<span class="token punctuation">.</span>el<span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>$data <span class="token operator">=</span> options<span class="token punctuation">.</span>data<span class="token punctuation">;</span>

        <span class="token comment">//将数据添加到响应式系统中</span>
        <span class="token keyword">new</span> <span class="token class-name">Observer</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$data<span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token comment">//代理数据</span>
        Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$data<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">key</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_proxy</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>

        <span class="token comment">//处理DOM</span>
        <span class="token keyword">new</span> <span class="token class-name">Compiler</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$el<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token function">_proxy</span><span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> key<span class="token punctuation">,</span> <span class="token punctuation">{</span>
            enumerable<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
            configurable<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
            <span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$data<span class="token punctuation">[</span>key<span class="token punctuation">]</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token function">set</span><span class="token punctuation">(</span>newValue<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span>$data<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> newValue<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">Observer</span> <span class="token punctuation">{</span>
    <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>data <span class="token operator">=</span> data<span class="token punctuation">;</span>
        Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">key</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">defineReactive</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">,</span> key<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>

    <span class="token function">defineReactive</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> key<span class="token punctuation">,</span> val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> dep <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Dep</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> key<span class="token punctuation">,</span> <span class="token punctuation">{</span>
            enumerable<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
            configurable<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
            <span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">if</span> <span class="token punctuation">(</span>Dep<span class="token punctuation">.</span>traget<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    dep<span class="token punctuation">.</span><span class="token function">addSub</span><span class="token punctuation">(</span>Dep<span class="token punctuation">.</span>traget<span class="token punctuation">)</span><span class="token punctuation">;</span>
                    Dep<span class="token punctuation">.</span>traget <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
                <span class="token keyword">return</span> val<span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token function">set</span><span class="token punctuation">(</span>newValue<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">if</span> <span class="token punctuation">(</span>newValue <span class="token operator">===</span> val<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>
                val <span class="token operator">=</span> newValue<span class="token punctuation">;</span>
                dep<span class="token punctuation">.</span><span class="token function">notify</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">Dep</span> <span class="token punctuation">{</span>
    <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>subs <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token function">addSub</span><span class="token punctuation">(</span><span class="token parameter">sub</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>subs<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>sub<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token function">notify</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>subs<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">sub</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            sub<span class="token punctuation">.</span><span class="token function">updated</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">Watcher</span> <span class="token punctuation">{</span>
    <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">node<span class="token punctuation">,</span> name<span class="token punctuation">,</span> vm</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>node <span class="token operator">=</span> node<span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>vm <span class="token operator">=</span> vm<span class="token punctuation">;</span>
        Dep<span class="token punctuation">.</span>traget <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">updated</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>        
    <span class="token punctuation">}</span>

    <span class="token function">updated</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>node<span class="token punctuation">.</span>nodeValue <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>vm<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>node<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>vm<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>node<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>vm<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\{\{(.*)\}\}</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">Compiler</span> <span class="token punctuation">{</span>
    <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span> vm</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>el <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span>el<span class="token punctuation">)</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>vm <span class="token operator">=</span> vm<span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>flag <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_createFragment</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>el<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>flag<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token function">_createFragment</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> flag <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createDocumentFragment</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">let</span> child<span class="token punctuation">;</span>
        <span class="token keyword">while</span> <span class="token punctuation">(</span>child <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>el<span class="token punctuation">.</span>firstChild<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_compile</span><span class="token punctuation">(</span>child<span class="token punctuation">)</span><span class="token punctuation">;</span>
            flag<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>child<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">return</span> flag<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token function">_compile</span><span class="token punctuation">(</span><span class="token parameter">node</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>node<span class="token punctuation">.</span>nodeType <span class="token operator">==</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>node<span class="token punctuation">.</span>nodeValue<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">const</span> name <span class="token operator">=</span> RegExp<span class="token punctuation">.</span>$<span class="token number">1.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token keyword">new</span> <span class="token class-name">Watcher</span><span class="token punctuation">(</span>node<span class="token punctuation">,</span> name<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>vm<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>node<span class="token punctuation">.</span>nodeType <span class="token operator">==</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">const</span> attrs <span class="token operator">=</span> node<span class="token punctuation">.</span>attributes<span class="token punctuation">;</span>
            <span class="token keyword">let</span> name<span class="token punctuation">;</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>attrs<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span><span class="token string">&quot;v-model&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                name <span class="token operator">=</span> attrs<span class="token punctuation">[</span><span class="token string">&quot;v-model&quot;</span><span class="token punctuation">]</span><span class="token punctuation">.</span>nodeValue<span class="token punctuation">;</span>
                node<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&quot;input&quot;</span><span class="token punctuation">,</span> <span class="token parameter">e</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                    <span class="token keyword">this</span><span class="token punctuation">.</span>vm<span class="token punctuation">[</span>name<span class="token punctuation">]</span> <span class="token operator">=</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
                <span class="token keyword">if</span> <span class="token punctuation">(</span>reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>node<span class="token punctuation">.</span>outerHTML<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    name <span class="token operator">=</span> RegExp<span class="token punctuation">.</span>$<span class="token number">1.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
            <span class="token keyword">new</span> <span class="token class-name">Watcher</span><span class="token punctuation">(</span>node<span class="token punctuation">,</span> name<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>vm<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><hr> <h2 id="flux-概念"><a href="#flux-概念" class="header-anchor">#</a> Flux 概念</h2> <ol><li>概念：Flux是由Facebook官方提出的一套前端应用的框架模式</li> <li>核心思想：单向数据流</li> <li>剑指MVC模式</li> <li>2013年与React同时发布，Facebook认为React与Flux可以相辅相成，构建大型JavaScript应用</li> <li>而后，Redux继承了Flux的模式思想，青出于蓝而胜于蓝</li> <li>流程：
<ul><li>Dispatcher：分发Action,维持与Store的逻辑关系</li> <li>Store：存储数据，处理数据，JS对象</li> <li>Action：Dispatcher分发的JS对象</li> <li>View：视图</li> <li>与Controller相比，Dispatcher暴露的接口是不变的</li> <li>Store改变后，View更新</li> <li>View希望更新Store无法直接操作，因为Store只要get方法，没有set方法。View需要向Dispatcher抛出Action来间接改变Store</li></ul></li></ol> <hr> <h2 id="mvc-框架"><a href="#mvc-框架" class="header-anchor">#</a> MVC 框架</h2> <ol><li><p>Module: 用于存放数据 ；View: 用于更新DOM；Controller: 调用Module给View渲染使用</p></li> <li><p>M与C是双向数据流，V和C是单向数据流</p></li> <li><p>HTML+CSS+JavaScript的分离，本质上不是“分而治之“的，在JavaScript中业务逻辑和界面逻辑混在一起非常难受，所以势必无法用于构造大型的前端应用</p></li> <li><p>Facebook开始使用MVC模式，但很快发现：</p> <ul><li><p>MVC模式让代码变得非常复杂，主要体现为不同模块之间的依赖和耦合增加</p></li> <li><p>当一位开发者修改一段代码后，会迅速影响到依赖这个模块的其他模块，代码变得脆弱，不可预测</p></li> <li><p>MVC框架中，开发者为了图省事，经常选择不去扩展Controller，而是直接再Model和View之间通信</p></li></ul></li></ol> <hr> <h2 id="rudex"><a href="#rudex" class="header-anchor">#</a> Rudex</h2> <ol><li><p>流程：</p> <ul><li>Action -&gt; Dispatcher -&gt; Reducer -&gt; Store -&gt; View</li> <li>View -&gt; Action -&gt; Dispatcher</li></ul></li> <li><p>演示：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">//1. 引入redux</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> createStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'redux'</span>

<span class="token comment">//2. 创建一个reducer函数，用于状态更新</span>
<span class="token comment">// reducer(state, action) 返回一个新对象</span>
<span class="token keyword">const</span> defaultData <span class="token operator">=</span> <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">&quot;小火龙&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">reducer</span><span class="token punctuation">(</span><span class="token parameter">state <span class="token operator">=</span> defaultData<span class="token punctuation">,</span> action</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> newState<span class="token operator">=</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>action<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">&quot;merge&quot;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>action<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">key</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
            newState<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token operator">=</span>action<span class="token punctuation">.</span>data<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> newState<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> state<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">//3. 创建store</span>
<span class="token keyword">let</span> store <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span>reducer<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//4. 当有人读取store中的state时，通过getState来调用</span>
<span class="token keyword">let</span> state <span class="token operator">=</span> store<span class="token punctuation">.</span><span class="token function">getState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//5. 订阅</span>
store<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>store<span class="token punctuation">.</span><span class="token function">getState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">//6. 用dispatcher来修改store中的state</span>
store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    data<span class="token operator">:</span> <span class="token punctuation">{</span>
        level<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
        skill<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;撞击&quot;</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    type<span class="token operator">:</span> <span class="token string">&quot;merge&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>store<span class="token punctuation">.</span><span class="token function">getState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li></ol> <hr> <h2 id="web攻击"><a href="#web攻击" class="header-anchor">#</a> Web攻击</h2> <h3 id="xss"><a href="#xss" class="header-anchor">#</a> XSS</h3> <ol><li><p>XSS (Cross-Site Scripting)，跨站脚本攻击，因为缩写和 CSS重叠，所以只能叫 XSS。跨站脚本攻击是指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或JavaScript进行的⼀种攻击。</p></li> <li><p>跨站脚本攻击有可能造成以下影响:</p> <ul><li>利用虚假输入表单骗取用户个人信息。</li> <li>利用脚本窃取用户的Cookie值，被害者在不知情的情况下，帮助攻击者发送恶意请求。</li> <li>显示伪造的文章或图片。</li></ul></li> <li><p>防范手段：</p> <ul><li>HEAD 设置 X-XSS-Protection</li> <li>设置HttpOnly Cookie 防止被客户端窃取cookie</li> <li>CSP（内容安全策略）</li> <li>转义字符</li> <li>白名单</li> <li>黑名单</li></ul></li></ol> <h3 id="csrf"><a href="#csrf" class="header-anchor">#</a> CSRF</h3> <ol><li>CSRF(Cross Site Request Forgery)，即跨站请求伪造，是一种常见的Web攻击，它利用用户已登录的身份，在用户毫不知情的情况下，以用户的名义完成非法操作。</li> <li>有可能造成以下影响:
<ul><li>利用用户登录态，完成某些业务请求</li> <li>盗取用户资金</li> <li>冒充用户发帖背锅</li> <li>损害网站声誉</li></ul></li> <li>防范手段：
<ul><li>禁止第三方网站带Cookie - 有兼容性问题</li> <li>Referer Check - Https不发送referer</li> <li>验证码</li></ul></li></ol> <h3 id="点击劫持"><a href="#点击劫持" class="header-anchor">#</a> 点击劫持</h3> <ol><li><p>点击劫持是一种视觉欺骗的攻击手段。攻击者将需要攻击的网站通过 iframe 嵌套的方式嵌入自己的网页中，并将 iframe 设置为透明，在页面中透出一个按钮诱导用户点击。</p></li> <li><p>有可能造成以下影响:</p> <ul><li>用户不知情的情况下完成某些业务操作</li></ul></li> <li><p>防范手段：</p> <ul><li><p>设置 X-FRAME-OPTIONS</p> <ul><li>DENY：表示页面不允许通过 iframe 的方式展示</li> <li>SAMEORIGIN：表示页面可以在相同域名下通过 iframe 的方式展示</li> <li>ALLOW-FROM：表示页面可以在指定来源的 iframe 中展示</li></ul></li> <li><p>js判断是否是iframe被嵌入在iframe中，如果嵌入，就直接跳转回原链接</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>click-jack<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
            <span class="token selector">html</span> <span class="token punctuation">{</span>
            <span class="token property">display</span><span class="token punctuation">:</span> none <span class="token important">!important</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
            <span class="token keyword">if</span> <span class="token punctuation">(</span>self <span class="token operator">==</span> top<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">var</span> style <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'click-jack'</span><span class="token punctuation">)</span>
            	document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span>style<span class="token punctuation">)</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
            	top<span class="token punctuation">.</span>location <span class="token operator">=</span> self<span class="token punctuation">.</span>location
            <span class="token punctuation">}</span>
        </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>    
</code></pre></div></li></ul></li></ol> <h3 id="sql注入"><a href="#sql注入" class="header-anchor">#</a> SQL注入</h3> <ol><li>通过注入有sql含义的字符（比如 <code>1'or'1'='1</code>）提交，来通过 sql查询密码等信息时，因为后端直接拼sql接字符串等原因，完成了用户信息的验证。</li> <li>有可能造成以下影响:
<ul><li>登录任何用户账号，行使该用户权限下的所有业务</li> <li>盗取用户资金</li> <li>冒充用户发帖背锅</li> <li>损害网站声誉</li> <li>危害整个平台的管理运行</li></ul></li> <li>防范手段：
<ul><li>所有的查询语句建议使用数据库提供的参数化查询接口，参数化的语句使用参数而不是将用户输入变量嵌入到 SQL 语句中，即不要直接拼接 SQL 语句句。</li> <li>严格限制Web应用的数据库的操作权限，给此用户提供仅能够满足其工作的最低权限，从而最大限度的减少注入攻击对数据库的危害后端代码检查输入的数据是否符合预期，严格限制变量的类型，例如使用正则表达式进行一些匹配处理。</li> <li>对进入数据库的特殊字符（'，&quot;，\，&lt;，&gt;，&amp;，*，; 等）进行转义处理，或编码转换。</li></ul></li></ol> <h3 id="os注入"><a href="#os注入" class="header-anchor">#</a> OS注入</h3> <ol><li>OS命令注入攻击指通过Web应用，执行非法的操作系统命令达到攻击的目的。只要在能调用Shell函数的地方就有存在被攻击的风险。倘若调用Shell时存在疏漏，就可以执行插入的非法命令。其实，OS命令注入和SQL注入差不多，只不过SQL注入是针对数据库的，而OS命令注入是针对操作系统的。</li> <li>有可能造成以下影响:
<ul><li>影响计算机某些操作</li> <li>危害整个项目的开发运行</li></ul></li> <li>防范手段：
<ul><li>选择不调用OS命令的实现方法</li> <li>不将外界输入的字符串传递给命令行参数</li> <li>使用安全的函数对传递给OS命令参数进行转义</li></ul></li></ol> <h3 id="请求劫持"><a href="#请求劫持" class="header-anchor">#</a> 请求劫持</h3> <ol><li>DNS服务器(DNS解析各个步骤)被篡改，修改了域名解析的结果，使得访问到的不是预期的ip。</li> <li>有可能造成以下影响:
<ul><li>套取用户信息</li></ul></li> <li>防范手段：
<ul><li>HTTP劫持 运营商劫持，此时只能升级HTTPS了</li></ul></li></ol> <h3 id="ddos"><a href="#ddos" class="header-anchor">#</a> DDOS</h3> <ol><li>DDOS 不是一种攻击，而是一大类攻击的总称。它有几十种类型，新的攻击方法还在不断发明出来。网站运行的各个环节，都可以是攻击目标。只要把一个环节攻破，使得整个流程跑不起来，就达到了痪服务的目的。</li> <li>有可能造成以下影响:
<ul><li>服务器宕机，整个或部分业务瘫痪</li></ul></li> <li>防范手段：
<ul><li>备份网站
备份网站不一定是全功能的，如果能做到全静态浏览，就能满足需求。最低限度应该可以显示公告，告诉用户，网站出了了问题，正在全力抢修。</li> <li>HTTP 请求的拦截
硬件 服务器 防火墙</li> <li>带宽扩容 + CDN
提高犯罪成本</li></ul></li> <li>详见阮一峰的<a href="http://www.ruanyifeng.com/blog/2018/06/ddos.html" target="_blank" rel="noopener noreferrer">DDOS 攻击的防范教程<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ol> <hr> <h2 id="设计模式"><a href="#设计模式" class="header-anchor">#</a> 设计模式</h2> <ol><li>单例模式：保证一个类仅有一个实例，并提供一个访问它的全局访问点。</li> <li>适配器模式：为了解决两个软件实体间的接口不兼容的问题。</li> <li>外观模式：与适配器比较相似，但最显著的特点它是定义了一个新的接口。</li> <li>装饰者模式：能够在不改变对象自身的基础上，在程序运行期间给对象动态地添加职责。</li> <li>代理模式：为一个对象提供一个代用品或占位符，以便控制对它的访问。</li> <li>迭代器模式：提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。</li> <li>组合模式：对象组合成树形结构，以表示“部分-整体”的层次结构。</li> <li>享元模式：一种用于性能优化的模式，“fly”在这里是苍蝇的意思，意为蝇量级。享元模式的核心是运用共享技术来有效支持大量细粒度的对象。</li> <li>策略模式：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替。</li> <li>发布订阅模式：又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。</li> <li>命令模式：命令指的是一个执行某些特定事情的指令。</li> <li>模板方法模式：一种只需使用继承就可以实现的非常简单的模式，一种严重依赖抽象类的设计模式。一般由两部分结构组成，第一部分是抽象父类，第二部分是具体的实现子类。通常在抽象父类中封装了子类的算法框架，包括实现一些公共方法以及封装子类中所有方法的执行顺序。子类通过继承这个抽象类，也继承了整个算法结构，并且可以选择重写父类的方法。</li> <li>职责链模式：使多个对象都有机会处理请求，从而避免请求的发送者和接收者之间的耦合关系，将这些对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理它为止。</li> <li>中介者模式：为了解除对象与对象之间的紧耦合关系。增加一个中介者对象后，所有的相关对象都通过中介者对象来通信，而不是互相引用，所以当一个对象发生改变时，只需要通知中介者对象即可。中介者使各对象之间耦合松散，而且可以独立地改变它们之间的交互。使网状的多对多关系变成了相对简单的一对多关系。</li> <li>状态模式：允许一个对象在其内部状态改变时改变它的行为，对象看起来似乎修改了它的类。</li></ol> <hr> <h2 id="设计原则"><a href="#设计原则" class="header-anchor">#</a> 设计原则</h2> <ol><li>单一职责原则：就一个类（通常也包括对象和函数等）而言，应该仅有一个引起它变化的原因。如果一个对象承担了多项职责，就意味着这个对象将变得巨大，引起它变化的原因可能会有多个。面向对象设计鼓励将行为分布到细粒度的对象之中，如果一个对象承担的职责过多，等于把这些职责耦合到了一起，这种耦合会导致脆弱和低内聚的设计。当变化发生时，设计可能会遭到意外的破坏。</li> <li>开放封闭原则：核心的思想是软件实体是可扩展，而不可修改的。也就是说，对扩展是开放的，而对修改是封闭的。主要体现在扩展开放，意味着有新的需求或变化时，可对现有代码扩展，以适应新的情况；对修改封闭，意味着类一旦设计完成，就可独立完成工作。</li> <li>好莱坞原则：允许底层组件将自己挂钩到高层组件中，而高层组件会决定什么时候、以何种方式去使用这些底层组件，高层组件对待底层组件的方式，跟演艺公司对待新人演员一样，都是“别调用我们，我们会调用你。即高层组件调用底层组件。</li> <li>迪米特原则：也叫最少知识原则，是指一个对象应该尽可能少地了解另外的对象，即一个软件实体应当尽可能少地与其他实体发生相互作用。</li> <li>里氏替换原则：子类能覆盖基类，且任何基类可以出现的地方，子类一定可以出现。</li> <li>接口隔离原则：客户端不应该依赖它不需要的接口。一个类对另一个类的依赖应该建立在最小的接口上。</li> <li>依赖倒置原则：抽象编程，依赖于抽象而不依赖于具体。使用方只关注接口而不关注具体类的实现。简单的说就是要求对抽象进行编程，不要对实现进行编程，这样就降低了客户与实现模块间的耦合。</li></ol> <hr> <h2 id="算法思想"><a href="#算法思想" class="header-anchor">#</a> 算法思想</h2> <ol><li>分治法:
<ol><li>分解问题</li> <li>解决问题</li> <li>合并问题</li></ol></li> <li>动态规划</li> <li>贪心</li> <li>回溯</li> <li>分支界定</li></ol> <hr> <h2 id="类的概念"><a href="#类的概念" class="header-anchor">#</a> 类的概念</h2> <ul><li>类(Class): 定义了一件事物的抽象的特点，包含它的属性和方法</li> <li>对象(Object): 类的实例，通过new生成</li> <li>面向对象(OOP)的三大特征: 封装、继承、多态</li> <li>封装: 将数据的操作细节隐藏起来，只暴露对外的接口，外界调用端不需要（也不可能）知道细节，就能通过对外提供的接口来访问该对象，同时也保证了外界无法任意更改对象内部的数据</li> <li>继承: 子类继承父类，子类除了拥有父类的所有特征外，还有一些更具体的特性</li> <li>多态: 由继承而产生了相关的不同的类，对同一个方法可以有不同的相应，比如Cat和Dog都是继承自Animal，但是分别实现了自己的eat方法。此时针对某一个实例，我们无需了解它是Cat还是Dog，就可以直接调用eat方法，程序会自动判断出来应该如何执行eat</li> <li>存储器(getter &amp; setter): 用来改变属性的读取和赋值行为</li> <li>修饰符: 一些用于限定成员或类型性质的关键字。比如public表示公共属性或方法</li> <li>抽象类: 供其他类继承的基类，抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现</li> <li>接口(interface): 不同类之间公共的属性或方法，可以抽象成一个接口。接口可以被类实现。一个类只能继承自另一个类，但是可以实现多个接口</li></ul></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
    <script src="/note_blob/assets/js/app.2eeab7c1.js" defer></script><script src="/note_blob/assets/js/2.0b68a382.js" defer></script><script src="/note_blob/assets/js/8.3b303ca1.js" defer></script>
  </body>
</html>
